<script>
// 新增编辑页，弹窗会另抽出组件
import { defineComponent } from 'vue'
// export default defineComponent({
// 	// components: { EditQrBase, EditQrWelcome, EditQrFunc },
// 	name: 'NewRadarLink'
// })
</script>
<script setup>
import {  radarOrignalForm } from '@/data'
import {postRadarAddA,postRadarInfo} from '@/api'
import { toRaw } from '@vue/reactivity'
import { ref, defineExpose, reactive } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import labels from '@/components/app/label.vue'
import Upload from '@/components/app/upload.vue'
const TestRef = ref(null)

const showLabels = ()=>{
  // console.log('111')
  // tableselect.value=true
  var data = {
show:true,
type:2
  }
  TestRef.value.tableshow(data)
}
const tagData = ref([])
const labeldataapi=(val)=>{
var arr = []
console.log(val,'sadasda')
	val.list.forEach(item=>{
		arr.push(toRaw(item))
	})
tagData._value = arr
handleRefresh()
}
const handleDeleTag   = (val) => {
var arr = tagData.value
  arr.splice(val,1)
 tagData._value = arr
   handleRefresh()
}
const isRefresh = ref(true)
const handleRefresh = ()=>{
	isRefresh.value = false
	isRefresh.value = true
}
const isNew = ref(true)
const dialogVisible = ref(false)
const form = ref({})
const showfalse = ref(false)
const show = async (val) => {
	console.log(val, 'sdsdsd')
	if (val) {
		if(val.id){
			isNew.value = false
			// TODO 少了个info详情接口
			console.log(val, '根据拿到的id获取form数据')
			postRadarInfo({id:val.id}).then(res=>{
				form.value=res.data
				tagData.value=res.data.tag_name
				showfalse.value=true
			})
			
		}else{
			form.value = Object.assign(form.value,radarOrignalForm )
			showfalse.value=true
		}
	
	} else {
		form.value = Object.assign(form.value, radarOrignalForm)
		showfalse.value=true
	}

	dialogVisible.value = true
	// handleRefresh()
}
const getUploadImg = (val) => {
  form.value.image_url = val.url
}
const submit = async (formEl) => {
	var json = form.value
	json.ex_tag = []
	tagData.value.forEach(item=>{
		json.ex_tag.push(item.tag_id)
	})
	const r = await postRadarAddA(json)
	if (r) {
		emits('goBack')
	}
}
// 返回
const cancel = () => {
	form._value = radarOrignalForm
	dialogVisible.value = false
	emits('goBack')
}
const emits = defineEmits(['goBack'])
defineExpose({
	show
})
</script>
<template>
	<div v-if="dialogVisible && isRefresh">
		<div class="app-back-tab" style="margin:0 20px">
			<div class="app-flex-left">
				<span class="back-box app-pointer" @click="cancel">
					<MyIcon class="app-icon" name="Back" />
					<span class="back-box-mr">返回</span>
				</span>
				<span class="back-box-gap">|</span>
				<span class="back-title">新建雷达链接</span>
			</div>
		</div>
		<div class="app-edit app-gap-block-top">
			<div style="display: flex">
				<div>
					<div class="app-edit-title">
						<span class="app-edit-title-words">基础信息</span>
					</div>
					<div style="margin:20px">
						<el-form ref="formRef" :model="form" :rules="rules">
							<el-form-item label="雷达标题：" prop="title">
					<el-input v-model="form.title" placeholder="名称不会展示给客户，用于记录和搜索" />
				</el-form-item>
				
							<el-form-item label="雷达链接：" prop="link">
					<el-input v-model="form.link" placeholder="请输入链接地址" />
				</el-form-item>
					<el-form-item label="链接标题：" prop="link_title">
					<el-input v-model="form.link_title" placeholder="请输入" />
				</el-form-item>
					<el-form-item label="链接描述：" prop="description">
					<el-input v-model="form.description" placeholder="请输入" />
				</el-form-item>
				<el-form-item label="图片:" prop="image_url">
                                   <Upload v-if="showfalse" :imgurl="form.image_url" @getImg="getUploadImg($event, val)" />
                                </el-form-item>


						</el-form>
					</div>
					<div class="app-edit-title">
						<span class="app-edit-title-words">链接追踪设置</span>
					</div>
						<div style="margin:20px">
					
											<div class="">
					<el-checkbox :true-label="1" :false-label="0" v-model="form.behavior_inform" @change="handleRefresh" size="large">
						<span>
							<span>行为通知</span>
							<span class="app-words-tip-weak"> （当客户点击雷达链接时，发送雷达链接的员工将会收到消息提醒） </span>
						</span>
					</el-checkbox>
				</div>
				<div class="">
					<el-checkbox :true-label="1" :false-label="0" v-model="form.dynamic_inform" @change="handleRefresh" size="large">
						<span>
							<span>动态通知</span>
							<span class="app-words-tip-weak">
								（当客户点击雷达链接时，会将客户的打开行为记录在客户动态里）
							</span>
						</span>
					</el-checkbox>
				</div>
				<div class="">
					<el-checkbox :true-label="1" :false-label="0" v-model="form.ex_tag_inform" @change="handleRefresh" size="large">
						<span>
							<span>客户标签</span>
							<span class="app-words-tip-weak"> （给点击雷达链接的客户打上选中的标签） </span>
						</span>
					</el-checkbox>
					<div v-if="form.ex_tag_inform==1">
					      <el-button @click="showLabels">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>添加标签
                                </el-button>
                                <labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
                                <div style="margin-bottom:20px">
                            <span v-if="isRefresh" class="app-tag app-gap-tr" v-for="(select, index) in tagData" :key="index">
										<span class="app-flex-left">
											<span class="app-gap-words-left">{{ select.tag_name }}</span>
										</span>
										<el-icon
											@click="handleDeleTag(index)"
											class="app-tag-close"
											:size="16"
											color="#999"
										>
											<CircleClose />
										</el-icon>
                                    </span>
                                    </div>
																		</div>
				</div>
			</div>
				</div>
			</div>
		</div>




		<div class="app-edit app-gap-block app-container app-flex-center">
			<el-button @click="cancel">取消</el-button>
			<el-button type="primary" @click="submit">保存</el-button>
		</div>
	</div>
</template>
<style lang="scss">
</style>
